<template>
    <div>
        <!-- 历史搜索展示 -->
        <div class="search-histroy">
            <div class="search-histroy-left">
                <i class="iconfont icon-search"></i>
            </div>
            <div class="search-histroy-center">
                <p>历史搜索</p>
                <div v-show="histroy.length!=0">
                    <p v-for="(v,i) in histroy" :key="i" @click="$router.push({path:'/searchGood?'+Math.random(),query:{word:v}})">{{v}}</p>
                </div>
                <div v-show="histroy.length==0">
                    <div>无历史记录!</div>
                </div>
            </div>
            <div class="search-histroy-right">
                <i class="iconfont icon-trash" @click="clearStorage()"></i>
            </div>
        </div>
        <!-- 热门搜索 -->
        <div class="search-hot">
            <div class="search-hot-left">
                <i class="iconfont icon-star"></i>
            </div>
            <div class="search-hot-center">
                <p>热门搜索</p>
                <div>
                    <p v-for="(hotWord,i) in hotWords" :key="i" :style="'color:'+hotWord.color" 
                        @click="openHotWord(hotWord.query)"
                    >{{hotWord.query}}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        hotWords: {
            type: Array,
            default() {
                return [];
            }
        },
        histroy: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    methods: {
        clearStorage() {
            // this.histroy = [];
            this.$emit("update:clear");
            localStorage.removeItem("histroyDatas");
        },
        openHotWord(arg) {
            //以带入随机值的参数防止若访问了相同的参数产生的路由参数不变化问题
            this.$router.push({ path: "/searchGood?"+Math.random(), query: { word: arg } });
            let data=JSON.parse(localStorage.getItem("histroyDatas"))||[];
            // console.log(arg);
            // console.log(data);
            // console.log(data.indexOf(arg));
            // console.log(data.constructor.name);
            if(data.indexOf(arg)==-1){
                data.push(arg);
                localStorage.setItem("histroyDatas",JSON.stringify(data));
                this.$emit("update:reset");
            }
        }
    }
};
</script>
<style lang="less" scoped>
//搜索历史记录页面样式
// .searchComponent-box {
//     position: absolute;
//     top: 1rem;
//     bottom: 0rem;
//     left: 0rem;
//     right: 0rem;
//     // overflow-y: auto;
//     z-index:999;
//     background-color:@white;
// }
//历史搜索的样式
.search-histroy,
.search-hot {
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.2rem;
    display: flex;
    border-bottom: 1px solid @gray;
    > .search-histroy-left {
        flex: 1;
        text-align: center;
        > i {
            font-size: 0.4rem;
        }
    }
    > .search-histroy-center {
        flex: 6;
        padding: 0 0.1rem;
        > div {
            display: flex;
            flex-flow: row wrap;
            padding-top: 0.2rem;
            > p {
                padding: 0 0.1rem;
                background-color: @gray-ee;
                margin: 0rem 0.1rem 0.1rem 0rem;
                border: 1px inset @gray;
                color: @gray;
            }
        }
    }
    > .search-histroy-right {
        flex: 1;
        text-align: center;
        > i {
            font-size: 0.4rem;
        }
    }
    > .search-hot-left {
        flex: 1;
        text-align: center;
        > i {
            font-size: 0.4rem;
        }
    }
    > .search-hot-center {
        flex: 6;
        padding: 0rem 0.7rem 0rem 0.05rem;
        > div {
            display: flex;
            flex-flow: row wrap;
            padding-top: 0.2rem;
            > p {
                padding: 0 0.1rem;
                background-color: @gray-ee;
                margin: 0.1rem 0.1rem 0rem 0rem;
                border: 1px inset @gray;
                color: @gray;
            }
        }
    }
}
.search-hot {
    border: none;
}
</style>